<template>
  <div class="container">
      <top :address="address"></top>
      <div class="banner">
          <swiper :imgUrls="banner"></swiper>
      </div>
      <div class="classify">
          <navList :navList="indexNav"  type="2" ></navList>
      </div>
      <div class="specialNav">
        <van-row>
          <van-col span="6" v-for="(item,idx) in starlNav" :key="idx" @click="switchTab(idx,item.top,item.id)">
            <div :class="currentStar==idx ? 'top-bar-active' : ''" >
                <span>{{item.name}}</span>
                <img src="/static/images/grey_triangle1_pre@2x.png" alt="" class="icon1" v-if="(idx==3)&&item.top!=0">
                <img src="/static/images/grey_triangle1@2x.png" alt="" class="icon1" v-if="(idx==3)&&item.top==0">

                <img src="/static/images/price.jpg" alt="" class="icon" v-if="(idx!=0&&idx!=3)&&item.top==0">
                <img src="/static/images/jiang.jpg" alt="" class="icon" v-if="(idx!=0&&idx!=3)&&item.top==1">
                <img src="/static/images/sheng.jpg" alt="" class="icon" v-if="(idx!=0&&idx!=3)&&item.top==2">
            </div>
          </van-col>
        </van-row>
      </div>
      <div style="padding-top:10px;">
         <courseList :kcList="item._source"  v-for="(item,idx) in courseList" :key="idx" :type="1"></courseList>
      </div>
      <img :src="img+'/que/no_conten@2x.png'" class="queS" v-if="queS"/>
  </div>
</template>

<script>
import swiper from "@/components/swiper";
import top from "@/components/top"
import navList from "@/components/nav";
import courseList from "@/components/list";
import {pingList} from "@/api/ping.js"
import {menu} from "@/api/menu.js"
import {indexads} from '@/api/index'
import {courseCate} from '@/api/index'
export default {
  components: {
      swiper,
      top,
      navList,
      courseList
  },

  data () {
    return {
      num:4,
      sign_today:0,
      banner: [],
      address:"太原",
      indexNav: [],
      starlNav:[
        {name:"推荐",id:"1",top:0,jiang:0,sheng:0},
        {name:"价格",id:"2",top:0,jiang:5,sheng:6},
        {name:"粉丝",id:"3",top:0,jiang:3,sheng:4},
        {name:"距离",id:"4",top:0,jiang:2,sheng:2},
     ],
      courseList:[],
      currentStar:"0",
      starstatus:0,
      load:false,
      page:1,
      zip:"",
      lng:0,
      lat:0,
      user_id:0,
      img: this.$URL.imgurl,
      queS:false
    }
  },
  methods:{
     switchTab(idx,top,id){
      // console.log(idx,top,id)   
      this.courseList=[];
      var currentStar = this.currentStar;
      var idx = idx;
      var id = id;
      var Top=top;
      var starlNav = this.starlNav;
      if(Top==0){
        top=1
      }else if(Top==1){
        top = 2
      } else if (Top == 2) {
        top = 1;
      }
      // console.log(3)
      starlNav[idx].top=top
      if ((currentStar == idx) && (idx==0)){
        this.starstatus=0;
        this.getpingList()
        return;
      }else{
        for (var i = 0; i < starlNav.length; i++) {
          starlNav[i].top = 0
        }
        if(top==1){
           this.starstatus=starlNav[idx].jiang 
          this.getpingList()
        }else if(top==2){
          this.starstatus=starlNav[idx].sheng 
          this.getpingList()
        }
        starlNav[idx].top = top

        this.starlNav=starlNav
        this.currentStar=idx
      }
    },
    getpingList(){
      this.queS=false
      let data={};
      data.page=this.page;
      data.lat=this.lat;
      data.lng=this.lng;
      data.user_id=this.user_id;
      data.status=this.starstatus;
      data.zip=this.zip;
      pingList(data).then(res=>{
        console.log(res)
        if(res.code==200){
           let last_page=res.data.data.last_page;
           if(this.page==1){
              this.courseList=res.data.data.data
           }else{
              this.courseList=this.courseList.concat(res.data.data.data)
           }
           if(last_page>this.page){
             this.load=true
           }else{
             this.load=false
           }
        }else if(res.code==201){
          this.queS=true
        }
      }).catch(res=>{
         this.queS=true
      })
    },
    getMenu(){
      courseCate().then(res=>{
        if(res.code==200){
            this.indexNav=res.data
        }
      }) 
    },
    getads(spaceid){
      indexads({spaceid:spaceid,zip:this.zip}).then(res=>{
        this.banner=res.data
      })
    },
  },
  created () {
    
  },
  onReachBottom(){
    if(this.load){
       this.page++
       this.getpingList()
    }
  },
  onLoad(){
    Object.assign(this.$data, this.$options.data())
    this.lng=wx.getStorageSync("coordinate").longitude;
    this.lat=wx.getStorageSync("coordinate").latitude;
    this.zip=wx.getStorageSync("qcode");
    this.user_id=wx.getStorageSync("user_info").id;
    this.address=wx.getStorageSync("address");

    this.getpingList()
    this.getMenu()
    this.getads(7)
  },
  onUnload(){
     
  },
}
</script>
<style>
.classify .nav .nav-item {
  width: 25%;
}
</style>
<style lang="scss">
.queS{
  width:417rpx;
  height:324rpx;
  display:block;
  margin:50px auto;
}
    .banner swiper{
      height:135px;
      img{
        height:135px;
      }
    } 
    .specialNav{
      font-size:14px;
      font-weight:500;
      color:rgba(51,51,51,1);
      text-align:center;
      height:40px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 4px 1px rgba(0, 0, 0, 0.07);
      line-height:40px;
      .icon{
        width:4px;
        height:9px;
        margin-left:1px;
      }
      .icon1{
        width:9rpx;
        height:7rpx;
        margin-left:1px;
        vertical-align: middle;
      }
      .top-bar-active{
        color:#1A84FB;
      }
    }
</style>
